<template>
  <div class="table-container">
    <el-table
        :data="processedTableData"
        border
        height="300"
        :row-class-name="tableRowClassName"
        style="width: 100%">
      <el-table-column
          type="index">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="amount"
          fixed="bottom"
          label="金额">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {date: '2023-01-01', name: '商品1', amount: 100},
        {date: '2023-01-02', name: '商品2', amount: 200},
        {date: '2023-01-03', name: '商品3', amount: 300},
        {date: '2023-01-03', name: '商品3', amount: 300},
        {date: '2023-01-03', name: '商品3', amount: 300},
        {date: '2023-01-03', name: '商品3', amount: 300},
        {date: '2023-01-03', name: '商品3', amount: 300},
        {date: '2023-01-22', name: '商品3', amount: 300},
      ]
    }
  },
  computed: {
    processedTableData() {
      // 计算总计
      const totalAmount = this.tableData.reduce((sum, item) => sum + item.amount, 0)
      const totalAmount2 = totalAmount * 2 // 假设第二个总计是第一总计的两倍

      // 返回带总计的数据
      return [
        ...this.tableData,
        {date: '总计1', name: '222222', amount: 222222, isTotal1: true},
        {date: '总计2', name: '333333', amount: 333333, isTotal2: true}
      ]
    }
  },
  methods: {
    tableRowClassName({row}) {
      if (row.isTotal1) {
        return 'summary-row1'
      }
      if (row.isTotal2) {
        return 'summary-row2'
      }
      return ''
    }
  }
}
</script>

<style>
.el-table .total-row {
  background-color: #f5f7fa;
  font-weight: bold;
}

.table-container {
  height: 400px;
  position: relative;
}

/* 固定底部行样式 */
.el-table .summary-row1 {
  position: sticky;
  bottom: 48px;
  background: #f5f7fa;
  z-index: 100;
  font-weight: bold;
}

.el-table .summary-row2 {
  position: sticky;
  bottom: 0;
  background: #f5f7fa;
  z-index: 100;
  font-weight: bold;
}

/* 修复边框问题 */
.el-table--border .summary-row1 td {
  border-bottom: 1px solid #ebeef5;
}
/* 修复边框问题 */
.el-table--border .summary-row2 td {
  border-bottom: 1px solid #ebeef5;
}
</style>